// components/input-select/index.js
/**
 * 目前没有办法获取输入框到屏幕底部的距离，如果是tarbar页面且用的是官方默认的tarbar就需要添加这个值
 * 自定义tabbar页面或者是非tabbar页面就不需要添加这个值,组件下面有一个isTabbar值设置，设置为true就代表添加TBRBAR_HEIGHT
 * 默认是不添加的
 */ 
const TBRBAR_HEIGHT = 60 //tabbar的高度，这里默认写60自动修改
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        list:{
            value:[],
            type:Array
        },
        isTabbar:{
            value:false,
            type:Boolean,// tabbar是否存在记住是内置的tabbar，自定义的tabbar不算
        },
        value:{
            value:"",
            type:String,
        },
        placeholder:{
          type:String
        }
    },
    observers:{
        value(val){
            this.setData({
                val,
            })
        }
    },
    /**
     * 组件的初始数据
     */
    data: {
        val:"",
        filterList:[],
        showPosition:0, // 0表示隐藏 1表示在输入框上面显示，2表示在输入框下面显示
        inputHeight:0,
        animation:null,
        
    },
    pageLifetimes:{
        onReady(){
            
        }
    },
    lifetimes:{
        ready(){
            this.windowHeight = this.windowHeight||wx.getSystemInfoSync().windowHeight
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        getPositin(){
            return new Promise((resolve,reject)=>{
                this.createSelectorQuery().select(".select-input").boundingClientRect(({height,bottom})=>{
                    // this.inputBottom = bottom  // 输入框底部到顶点的距离
                    this.setData({
                        inputHeight:height, // 输入框高度
                    })
                    resolve({inputHeight:height,inputBottom:bottom})
                }).exec()
            })
        },
        handleInput(e){
            const {value} = e.detail
            // let {list,filterList} = this.data
            // filterList = list.filter(item=>item.includes(value))
            // this.setData({
            //     filterList,
            //     val:value
            // })
            this.setData({
              val:value
            })
            this.triggerEvent("input",{value})
            this.createAnimation()
        },
        handleSelect(e){
            const {item} = e.target.dataset
            if(!item) return
            this.triggerEvent("ipnut",{value:item})
        },
        handleBlur(){
            this.setData({
                showPosition:0,
                animation:null,
            })
            // this.triggerEvent("blur",{value:this.data.val})
        },
        handleFocus(e){
            this.keyboardHeight = e.detail.height
            // let {list,filterList,val} = this.data
            // filterList = list.filter(item=>String(item).includes(val))
            // this.setData({
            //     filterList
            // })
            this.createAnimation()
        },
        async createAnimation(){
            const {inputHeight,inputBottom} = await this.getPositin()
            const {isTabbar,list} = this.data
            // if(!filterList.length){
            //     return this.setData({
            //         animation:null,
            //         showPosition:0
            //     })
            // } 
            const listHeight = (list.length)*inputHeight
            const distanceBottom = this.windowHeight-inputBottom+(isTabbar?TBRBAR_HEIGHT:0)-listHeight
            this.setData({
                showPosition:distanceBottom>this.keyboardHeight?2:1
            })
            const animation = wx.createAnimation()
            animation.height(listHeight).step({duration:160})
            this.setData({
                animation:animation.export()
            })
        }
    }
})
